<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <el-form size="small" :inline="true" ref="form" :model="myForm">
        <el-form-item>
          <el-input size="small" clearable v-model.trim="myForm.mchName" placeholder="请输入商户名称" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-date-picker v-model="myForm.timer" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="targetId" label="商户编码" align="center"></el-table-column>
        <el-table-column prop="mchName" label="商户名称" align="center"></el-table-column>
        <el-table-column prop="contactPhone" label="门店数量" align="center"></el-table-column>
        <el-table-column prop="equipmentCount" label="设备数" align="center"></el-table-column>
        <el-table-column prop="userCount" label="下级数量" align="center"></el-table-column>
        <el-table-column prop="proceeds" label="总收益" align="center"></el-table-column>
        <el-table-column prop="createTime" label="已结算收益" align="center"></el-table-column>
        <el-table-column prop="settlementTime" label="结算时间" align="center"></el-table-column>
      </el-table>
      <div class="text-center">
        <br />
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Setting from '@/settings'
import { GetMerchantIncomePaging } from '@/views/merchant-management/services'
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      pageData: [],
      pageCount: 0,
      myForm: {
        mchName: null,
        timer: null,
      },
    }
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    getPageDataList() {
      this.loading = true
      GetMerchantIncomePaging({
        mchName: this.myForm.mchName,
        type: this.$store.state.user.userRole,
        parentId: this.$store.state.user.userRole == 1 ? (JSON.parse(this.$store.getters.userInfo).mchId ? JSON.parse(this.$store.getters.userInfo).mchId : '1') : '', // type=1时必填 parentId=商户id
        startTime: this.myForm.timer && this.myForm.timer[0] ? this.myForm.timer[0] : '',
        endTime: this.myForm.timer && this.myForm.timer[1] ? this.myForm.timer[1] : '',
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
        .finally(() => (this.loading = false))
        .then(res => {
          if (res && res.code == 200) {
            this.pageData = res.data.list
            this.pageCount = res.data.total

            if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getPageDataList()
            }
          }
        })
    },
    reset() {
      this.pageIndex = 1
      this.myForm.mchName = null
      this.myForm.timer = null
      this.getPageDataList()
    },
  },
}
</script>

<style lang="scss" scoped>
</style> 
